<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>{{ 'core.settings.preferences' | translate}}</h1>
        </ion-title>
        <ion-buttons slot="end" />
    </ion-toolbar>
</ion-header>
<ion-content>
    <core-split-view>
        <ion-refresher slot="fixed" [disabled]="!handlers.loaded" (ionRefresh)="refreshData($event.target)">
            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
        </ion-refresher>
        <core-loading [hideUntil]="handlers.loaded" placeholderType="column" placeholderHeight="48px">
            <ion-list>
                <ion-item *ngFor="let handler of handlerItems" lines="none" [class]="['core-settings-handler', handler.class]"
                    [attr.aria-label]="handler.title | translate" (click)="!handler.toggle && handlers.select(handler)"
                    [button]="!handler.toggle" [detail]="!handler.toggle" [attr.aria-current]="handlers.getItemAriaCurrent(handler)">
                    @if (handler.icon) {
                        <ion-icon [name]="handler.icon" slot="start" aria-hidden="true" />
                    }
                    <ion-label>
                        <p class="item-heading">{{ handler.title | translate}}</p>
                    </ion-label>
                    @if (handler.toggle) {
                        <ion-toggle [(ngModel)]="handler.toggleChecked" (ionChange)="handler.toggle($event.detail.checked)" slot="end" />
                    }
                </ion-item>
            </ion-list>

            <ion-card>
                <ion-item class="ion-text-wrap">
                    <ion-label>
                        <p class="item-heading">{{ 'core.settings.synchronizenow' | translate }}</p>
                        <p>
                            {{ 'core.settings.synchronizenowhelp' | translate }}
                        </p>
                    </ion-label>
                    <core-button-with-spinner [loading]="isSynchronizing()" slot="end">
                        <ion-button fill="clear" (click)="synchronize()" [ariaLabel]="'core.settings.synchronizenow' | translate"
                            [disabled]="!isOnline() || (dataSaver && limitedConnection())">
                            <ion-icon name="fas-rotate" slot="icon-only" aria-hidden="true" />
                        </ion-button>
                    </core-button-with-spinner>
                </ion-item>
                @if (!isOnline() || (dataSaver && limitedConnection())) {
                    <ion-item class="core-warning-item ion-text-wrap">
                        <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                        <ion-label>
                            @if (isOnline() && dataSaver && limitedConnection()) {
                                {{ 'core.settings.connectwifitosync' | translate }}
                            }
                            @if (!isOnline()) {
                                {{ 'core.settings.connecttosync' | translate }}
                            }
                        </ion-label>
                    </ion-item>
                }
            </ion-card>
        </core-loading>
    </core-split-view>
</ion-content>
